<script setup lang="ts">
import {reactive} from 'vue';
import installTitle from './components/install-title.vue';
import {useRouter} from 'vue-router';

const router = useRouter()

const customerInstall = reactive({
  showCustomer: false,
  path: "C:\\Program Files (x86)\\adb empower",
  checkValue: [],
  backText: '\<返回'
})

</script>

<template>
  <installTitle model-value="normalNoLogo"></installTitle>
  <div class="page-container ver-layout-center">
    <img class="logo-view" src="../../assets/img/app-logo.png">
    <div class="title-view">ADB自助授权<span class="subtitle-view">(V1.0.0.1)</span></div>
    <div class="app-desc">全自助一体化授权、激活</div>
    <router-link to="/installProgress">
      <div class="install-btn">立即安装</div>
    </router-link>
  </div>
  <div v-if="customerInstall.showCustomer" class="customer-layout ver-layout-center">
    <div class="hor-layout-center" style="flex-shrink: 0;">
      <van-field v-model="customerInstall.path" size="small" :border="true" class="input-path-view"
                 placeholder="请选择文件路径"/>
      <van-button type="primary" size="normal" class="select-path-btn">浏览</van-button>
    </div>
    <div class="checkgroup-layout hor-layout-center">
      <van-checkbox-group v-model="customerInstall.checkValue" icon-size="15px" shape="square"
                          class="hor-layout-center">
        <van-checkbox name="a" class="check-item">添加桌面快捷方式</van-checkbox>
        <van-checkbox name="b" class="check-item">添加到快捷启动栏</van-checkbox>
        <van-checkbox name="c" class="check-item">开机自启动</van-checkbox>
      </van-checkbox-group>
    </div>
    <div class="customer-back-btn" @click="customerInstall.showCustomer = false">{{ customerInstall.backText }}</div>
  </div>
  <div v-else class="agree-view hor-layout-side-center">
    <div class="hor-layout-center">
      <input type="checkbox">
      <div>我同意
        <router-link to="/installAgreement">
          <span class="agreement-view">软件许可使用协议</span>
        </router-link>
      </div>
    </div>
    <div class="to-customer-btn" @click="customerInstall.showCustomer = true">自定义安装 ></div>
  </div>
</template>
<style lang="less">
.page-container {

  .logo-view {
    width: 120px;
    height: 120px;
    margin-top: 9%;
  }

  .title-view {
    position: relative;
    margin-top: 20px;
    color: #37A7F7;
    font-size: 36px;
  }

  .subtitle-view {
    position: absolute;
    font-size: 18px;
    bottom: 3px;
  }

  .app-desc {
    font-size: 20px;
    color: #7F7F7F;
    margin-top: 10px;
  }

  .install-btn {
    margin-top: 30px;
    width: 198px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    border-radius: 5px;
    background-color: #70b603;
    //文本样式
    color: white;
    font-size: 20px;
  }
}

.customer-layout {
  position: relative;
  margin-top: 30px;
  height: 100%;

  .input-path-view {
    border: 1px solid #7F7F7F;
    width: 380px;
    font-size: 13px;
  }

  .select-path-btn {
    flex-shrink: 0;
    margin-left: 10px;
  }

  .checkgroup-layout {
    margin-top: 20px;
    font-size: 14px;

    .check-item {
      margin-left: 30px;
    }
  }

  .customer-back-btn {
    position: fixed;
    bottom: 50px;
    right: 10%;
    color: #37A7F7;
  }
}

.agree-view {
  position: fixed;
  width: calc(100% - 20%);
  bottom: 50px;
  margin-left: 10%;
  margin-right: 10%;


  .agreement-view {
    color: #37A7F7;
    text-decoration: underline;
  }

  .to-customer-btn {
    color: #37A7F7;
  }
}
</style>
